<template>
    <div>
        <el-form ref="form" :rules="rules" :model="form" label-width="90px" :label-position="labelPosition"
                 style="margin-left: 5%;margin-right: 5%">
            <el-form-item label="代理人姓名 ：" prop="agentName">
                <el-input v-model="form.name"></el-input>
            </el-form-item>

            <el-form-item label="代理人类型 ：" v-if="showTwoType">
                <el-select v-model="identityType" placeholder="请选择委托人类型">
                    <el-option label="操作委托人" value="操作委托人"></el-option>
                    <el-option label="律师委托人" value="律师委托人"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="代理人类型 ：" v-if="showThreeType">
                <el-select v-model="identityType" placeholder="请选择委托人类型">
                    <el-option label="操作委托人" value="操作委托人"></el-option>
                    <el-option label="律师委托人" value="律师委托人"></el-option>
                    <el-option label="公司负责人" value="公司负责人"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="证件类型 ：">
                <el-select v-model="idType" placeholder="请选择证件类型">
                    <el-option label="身份证" value="身份证"></el-option>
                    <el-option label="执业证" value="执业证"></el-option>
                  <!--  <el-option label="护照" value="护照"></el-option>-->
                </el-select>
            </el-form-item>
            <el-form-item label="证件号码 ：" prop="idcard">
                <el-input v-model="form.idcard"></el-input>
            </el-form-item>
            <el-form-item label="手机号 ：" prop="mobile">
                <el-input v-model="form.mobile"></el-input>
            </el-form-item>
            <el-form-item label="邮箱 ：">
                <el-input v-model="form.email"></el-input>
            </el-form-item>
            <el-form-item label="约定送达地址 ：" prop="address">
                <el-input v-model="form.address"></el-input>
            </el-form-item>
            <el-form-item label="证件照背面或证件照一 ：" prop="idcardFront">
                <camera3 :src="form.idcardReverse" :target="getIdCardHeadValue"
                         @getIdCardHeadValue="getIdCardHead"></camera3>
            </el-form-item>
            <el-form-item label="证件照正面或证件照二 ：" prop="idcardReverse">
                <camera4 :src="form.idcardFront" :target="getIdCardTailValue"
                         @getIdCardTailValue="getIdCardTail"></camera4>
            </el-form-item>
            <div>
                <el-form-item label="授权委托证明文件 ：">
                </el-form-item>
            </div>
            <el-dialog
                    title="上传资料详细说明"
                    :visible.sync="showExplain"
                    width="80%"
                    center>
                <p>
                    <span class="detail">
                    1、请务必上传您的授权委托书，如有事务所公函，请一并上传。
                </span>
                </p>
                <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="showExplain = false">确  定</el-button>
            </span>
            </el-dialog>
        </el-form>
        <el-table
                :data="fileList"
                border
                style="width: 90%;margin-left: 5%;margin-right: 5%"
                @cell-click="downloadFile">
            <el-table-column
                    prop="name"
                    label="文件名">
            </el-table-column>
            <el-table-column
                    prop="updateDate"
                    label="操作"
                    width="105px">
                <template slot-scope="scope">
                    <el-button
                            v-if="scope.row.type == 1"
                            size="mini"
                            type="text"
                            @click="deleteFile(scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div>
            <el-button type="text" @click="showExplain = true" style="margin-right: 15%;float: right">上传资料说明
            </el-button>
            <upload-file style="" @getFileList="uploadFile" style="margin-left: 5%;float: left"></upload-file>
        </div>
        <div style="width: 100%; text-align: center;display:inline-block">
           <!-- <el-button type="primary" @click="previousPage" style="margin-right: 10%; width: 25%">上一页
            </el-button>-->
            <el-button type="primary" @click="nextPage('form')" style="width: 60%">{{agentButton}}
            </el-button>
        </div>
        <el-dialog
                :title="fileTitle"
                :visible.sync="fileVisible"
                width="95%"
                center>
            <pdf-shower v-if="fileType" :url="fileUrl" style="width: 100%"></pdf-shower>
            <img v-if="!fileType" :src="fileUrl" style="width: 100%"/>
        </el-dialog>
    </div>
</template>

<script>
    import Camera3 from 'components/upload/upload-image_3.vue'
    import Camera4 from 'components/upload/upload-image_4.vue'
    import UploadFile from 'components/upload/upload-button-text_2.vue'
    import PdfShower from 'components/pdf/pdf-shower.vue'
    import util from 'assets/js/util.js'
    import conf from 'assets/js/conf.js'

    export default {
        data() {
            return {
                showExplain: false,
                idType: '',
                email: '',
                address: '',
                getIdCardHeadValue: 'getIdCardHeadValue',
                getIdCardTailValue: 'getIdCardTailValue',
                fileVisible: false,
                fileUrl: '',
                total: 0,
                fileType: false,
                fileTitle: '',
                labelPosition: 'top',
                fileList: [],
                identityType: '',
                rules: {
                    name: [
                        {required: true, message: '请输入姓名', trigger: 'blur'},
                        {min: 2, max: 20, message: '请输入正确格式的姓名', trigger: 'blur'}
                    ],
                    idcard: [
                        {required: true, message: '请输入证件号码', trigger: 'blur'},
                    ],
                    mobile: [
                        {required: true, message: '请输入手机号', trigger: 'blur'},
                        {pattern: /^1\d{10}$/, message: '请输入正确的手机号'}
                    ],
                    address: [
                        {required: true, message: '请输入地址', trigger: 'blur'}
                    ],
                }
            }
        },
        props: [
            'form',
            'agentButton',
            'showThreeType',
            'showTwoType'
        ],
        mounted() {
            if (this.form.idcardFront !== "-1")
                this.form.idcardFrontVisible = true;
            if (this.form.idcardReverse !== "-1")
                this.form.idcardReverseVisible = true;
            this.idType = this.matchTypeText(this.form.idType);
            this.identityType = this.matchIdentityText(this.form.identityType);

            this.agentDetailFileids = util.getUrlParam(document.location.href, 'agentDetailFileids');
            const _self = this;
            let count = 0;
            util.ajax({
                url: '/file/getFileList',
                params: {eids: this.form.agentDetailFileids},
                success: function (data) {
                    data.data.forEach(_file => _self.fileList.push({
                        id: _file.id,
                        // type: _file.name.endsWith('pdf') ? 0 : 1,
                        name: '授权委托证明文件 ' + (++count),
                        count: count,
                        // updateDate: util.formatDate(_file.updateDate)
                    }))
                },
            });
        },
        methods: {

            nextPage: function (form) {
                const _self = this;
                if (!conf.inDevelop) {
                    if (_self.idType === '身份证') {
                        if (!_self.form.idcardFrontVisible) {
                            alert('请上传您的证件照背面或证件照一');
                            return
                        }
                        if (!_self.form.idcardReverseVisible) {
                            alert('请上传您的证件照正面或证件照二');
                            return
                        }
                    }
                    if (_self.idType === '执业证') {
                        if (!_self.form.idcardFrontVisible) {
                            alert('请上传您的证件照背面或证件照一');
                            return
                        }
                    }
                    if (_self.form.agentDetailFileids === '') {
                        alert('请上传您的授权委托证明文件');
                        return;
                    }
                    this.$refs[form].validate((valid) => {
                        if (valid) {
                            _self.form.idType = _self.matchType(_self.idType);
                            _self.form.identityType = _self.matchIdentityType(_self.identityType);
                            _self.$emit('nextPage', _self.form)
                        } else {
                            alert('您输入的信息有误!!');
                            return false
                        }
                    })
                } else {
                    this.form.idType = this.matchType(this.idType);
                    this.form.identityType = this.matchIdentityType(this.identityType);
                    this.$emit('nextPage', this.form)
                }
            },
            previousPage: function () {
                this.form.idType = this.matchType(this.idType);
                this.$emit('previousPage', this.form)
            },
            getIdCardHead: function (file) {
                this.form.idcardFrontVisible = true;
                this.form.idcardFront = file
            },
            getIdCardTail: function (file) {
                this.form.idcardReverseVisible = true;
                this.form.idcardReverse = file
            },
            uploadFile: function (file) {
                if (this.fileList.length > 30) {
                    alert('资料数量太多了, 请于线下邮寄');
                    return;
                }
                this.fileList.push({
                    id: file.id,
                    count: this.fileList.length + 1,
                    name: '授权委托证明文件 ' + (this.fileList.length + 1),
                    type: 1,
                    // updateDate: util.formatDate(file.updateDate)
                });
                if (this.form.agentDetailFileids === '')
                    this.form.agentDetailFileids = file.id;
                else
                    this.form.agentDetailFileids = this.form.agentDetailFileids + ',' + file.id;
            },
            deleteFile: function (row) {
                this.fileList.splice(row.count - 1, 1);
                this.form.agentDetailFileids = '';
                if (this.fileList.length > 1) {
                    this.fileList.forEach(_file => this.form.agentDetailFileids += _file.id + ',');
                    this.form.agentDetailFileids = this.form.agentDetailFileids.substring(0, this.form.agentDetailFileids.length - 1);
                }
                let count = 0;
                this.fileList.forEach(_file => {
                    _file.name = '授权委托证明文件 ' + (++count);
                    _file.count = count;
                })
            },
            downloadFile: function (row, column, cell, event) {
                if (column.label === '操作')
                    return;
                this.fileUrl = conf.baseUrl + '/file/get/' + row.id + '?type=1';
                this.fileTitle = row.name;
                if (row.type === 0) {
                    this.fileType = true;
                } else {
                    this.fileType = false;
                }
                this.fileVisible = true;
            },
            matchIdentityType: function (typeText) {
                let type = 1;
                switch (typeText) {
                    case '操作委托人':
                        type = 1;
                        break;
                    case '律师委托人':
                        type = 2;
                        break;
                    case '公司负责人':
                        type = 3;
                        break;
                    default:
                        break;
                }
                return type;
            },
            matchIdentityText: function (typeText) {
                let type = '操作委托人';
                switch (typeText) {
                    case 1:
                        type = '操作委托人';
                        break;
                    case 2:
                        type = '律师委托人';
                        break;
                    case 3:
                        type = '公司负责人';
                        break;
                    default:
                        break;
                }
                return type;
            },
            matchTypeText: function (typeText) {
                let type = '';
                switch (typeText) {
                    case 1:
                        type = '身份证';
                        break;
                    case 2:
                        type = '执业证';
                        break;
                   /* case 3:
                        type = '护照';
                        break;*/
                    default:
                        break;
                }
                return type;
            },
            matchType: function (typeText) {
                let type = '';
                switch (typeText) {
                    case '身份证':
                        type = 1;
                        break;
                    case '执业证':
                        type = 2;
                        break;
                   /* case '护照':
                        type = 3;
                        break;*/
                    default:
                        break;
                }
                return type;
            },
        },
        components: {
            Camera3,
            Camera4,
            UploadFile,
            PdfShower
        }
    };
</script>
<style>
    .el-form-item__label {
        line-height: 0
    }

    .detail {
        font-size: small;
        color: dimgray;
    }
</style>